<template>
  <div>
    <!-- 列表 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column type="menuId" label="编号" width="50" />
      <el-table-column prop="menuName" label="菜单名" width="150" />
      <el-table-column prop="pName" label="父级菜单名" width="150" />
      <el-table-column prop="menusUrl" label="路径" width="150">
      </el-table-column>
      <el-table-column prop="creator" label="创建人" width="100" />
      <el-table-column
        v-slot="scoped"
        prop="creationDate"
        label="创建时间"
        width="120"
      >
        <!-- {{ scoped.row.creationDate.substring(0, 10) }} -->
        {{ scoped.row.creationDate }}
      </el-table-column>
      <el-table-column
        v-slot="scoped"
        prop="updatedate"
        label="修改时间"
        width="120"
      >
        <!-- {{ scoped.row.updatedate.substring(0, 10) }} -->
        {{ scoped.row.updatedate }}
      </el-table-column>
      <el-table-column v-slot="scoped" prop="" label="操作" width="100">
        <el-button
          link
          type="primary"
          size="small"
          @click="upd(scoped.row.menuId)"
        >
          修改
        </el-button>
        <el-button
          link
          type="primary"
          size="small"
          @click="del(scoped.row.menuId)"
          >删除</el-button
        >
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      v-model:current-page="form.PageIndex"
      v-model:page-size="form.PageSize"
      :page-sizes="[1, 2, 3, 15]"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="form.TotalCount"
      @size-change="getMenu()"
      @current-change="getMenu()"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import axios from "axios";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import { KongaUrl } from "@/axios/axiosHelp";
const router = useRouter();
const form = reactive({
  PageIndex: 1,
  PageSize: 15,
  TotalCount: 0,
});
// --菜单列表显示
const tableData: any = ref([]);
const getMenu = () => {
  KongaUrl({
    url: "/user/api/Menu/GetMenusAll",
    method: "get",
    params: form,
  }).then((res) => {
    tableData.value = res.data.items;
    form.TotalCount = res.data.totalCount;
    console.log(res.data);
  });
};
//删除
const del = (menuId: any) => {
  ElMessageBox.confirm("是否删除?", "警告", {
    confirmButtonText: "是",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    var a = tableData.value.map((x: any) => x.pId);
    if (a.includes(menuId) == true) {
      ElMessageBox.confirm("此菜单有多个子级是否删除?", "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        axios({
          url: "https://localhost:7070/api/Menu/DeleteMenu",
          method: "post",
          params: {
            MenuId: menuId,
          },
        }).then((res) => {
          if (res.data.code == 500) {
            ElMessage.success(res.data.message);
            getMenu();
          } else {
            ElMessage.error(res.data.message);
            getMenu();
          }
        });
      });
    } else {
      axios({
        url: "https://localhost:44305/api/Menu/DeleteMenu",
        method: "post",
        params: {
          MenuId: menuId,
        },
      }).then((res) => {
        if (res.data.code == 500) {
          ElMessage.success(res.data.message);
          getMenu();
        } else {
          ElMessage.error(res.data.message);
          getMenu();
        }
      });
    }
  });
};
//修改页面跳转
const upd = (id: any) => {
  router.push({
    path: "/UpdateMenu",
    query: {
      id: id,
    },
  });
};
//钩子函数
onMounted(() => {
  getMenu();
});
</script>

<style scoped></style>